<template>
    <div class="content">
        <div class="center_box">
            <div class="add_box">
                <h3>基础信息</h3>
                    <div class="add_right">
                        <el-form
                            label-position="top"
                            label-width="auto"
                            :model="objectForm"
                            style="margin: auto;"
                            ref='fromRef'
                        >
                        <el-row :gutter="24">
                            <el-col :span="8">
                                <el-form-item label="企业账户:" required prop="username">
                                    <el-input v-model="objectForm.username" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="密码:" required prop="password">
                                    <el-input v-model="objectForm.password" type="password"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="确认密码:" required prop="confirmPassword">
                                    <el-input v-model="objectForm.confirmPassword" type="password"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="邮件:" required prop="email">
                                    <el-input v-model="objectForm.email" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="公司:" prop="tenantInfo">
                                    <!-- <HhSelect type='tenant' @change="hChange" v-model="tenantInfo"/> -->
                                    <el-input v-model="objectForm.email" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="角色:" prop="userRole">
                                    <el-select v-model="objectForm.userRole" placeholder="请选择">
                                        <el-option label="后台用户" value="2" />
                                        <el-option label="小程序用户" value="3" />
                                        <el-option label="后台管理员" value="1" />
                                        <el-option label="后台超级管理员" value="0" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="title_h_box">
                            <h3>拓展信息</h3>
                        </div>
                        <el-row :gutter="24">
                            <el-col :span="8">
                                <el-form-item label="计费模式:" prop="fullName">
                                    <el-input v-model="objectForm.fullName" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="单价设定:" prop="gender">
                                    <el-select v-model="objectForm.gender" placeholder="请选择">
                                        <el-option label="男" value="0" />
                                        <el-option label="女" value="1" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="8">
                                <el-form-item label="单价设定:" prop="birthDate">
                                        <el-date-picker
                                        v-model="objectForm.birthDate"
                                        type="datetime"
                                        placeholder="生日"
                                        format="YYYY-MM-DD HH:mm:ss"
                                        value-format="YYYY-MM-DD HH:mm:ss"
                                        style="width:100%;"
                                    />
                                    <el-input v-model="objectForm.phone" />
                                </el-form-item>
                            </el-col> -->
                            <el-col :span="8" >
                                <el-form-item label="特殊定制:" prop="phone">
                                    <el-input v-model="objectForm.phone" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="是否启用" prop="isActive">
                                    <el-switch
                                        :active-value="1"     
                                        :inactive-value="0"
                                        v-model="objectForm.isActive"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        </el-form>
                    </div>
                    <div class="title_h_box" style="justify-content:flex-end;">
                        <el-button @click="cancel">取消</el-button>
                        <el-button type="primary" @click="confirmAdd">确定</el-button>
                    </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { defineOptions , ref} from 'vue'
    import { ElMessage } from "element-plus";
    import HhSelect from '../utils/HhSelect.vue'
    import { useRouter } from 'vue-router'
    import * as userApi from '../../api/user/user.js'

    defineOptions({name: 'UserInfo'})

    const objectForm = ref({
        username: '',
        email: '',
        password: '',
        fullName: '',
        birthDate: null,
        gender: '',
        address: '',
        phone: '',
        openId: '',
        isActive: 1,
        userRole: ''
})

const tenantInfo = ref({})

const fromRef = ref()

const router = new useRouter()
const hChange = (e) => {
        objectForm.value.tenantId = e.id
}

const cancel = (e) => {
    router.push({
       name: 'user'
    })
}

const confirmAdd = async () => {
    // const res = await userApi.saveOrUpate(objectForm.value)
    const { code , msg } =res
    if(code == '200 ') {
        ElMessage.success('操作成功')
        fromRef.value.resetFields()
        return
    }
    ElMessage.error(msg)
}




</script>

<style lang="less" scoped>
    .add_right{
        width: 90%;
        height: 80%;
    }
        
    .center_box{
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 0;
        padding-top: 0;
    }
    .add_box{
        padding-top: 0px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin-top: 0;
    }
    .title_h_box{
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
</style>